<template>
  <div class="color-scheme">
    <div class="color-select">
      <el-select
        v-model="colorScheme.name"
        style="width:100%"
        size="small"
        placeholder="请选择配色方案"
        @change="changeColorOption()"
      >
        <template #label>
          <div class="row-line">
            <div style="overflow: hidden; border-radius: 2px">
              <span
                v-for="(c, index) in colorList"
                :key="index"
                :style="{
                  width: '12px',
                  height: '16px',
                  float: 'left',
                  backgroundColor: c
                }"
              />
            </div>
            <div style="margin-left: 4px">{{ colorScheme.label }}</div>
          </div>
        </template>
        <el-option
          v-for="option in colorCases"
          :key="option.value"
          :label="option.name"
          :value="option.value"
        >
          <template #default>
            <div class="row-line">
              <div style="overflow: hidden; border-radius: 2px">
                <span
                  v-for="(c, index) in option.colors"
                  :key="index"
                  :style="{
                    width: '12px',
                    height: '16px',
                    float: 'left',
                    backgroundColor: c
                  }"
                />
              </div>
              <div style="margin-left: 4px">{{ option.name }}</div>
            </div>
          </template>
        </el-option>
      </el-select>
      <ac-icon
        iconId="018ece4f712124866f78"
        size="18"
        @click="changeShowCustom"
        style="margin-left: 8px;cursor: pointer"
        title="自定义"
      />
    </div>
    <!--自定义配色方案-->
    <div v-show="showCustom" style="margin-top: 8px">
      <div class="custom-title">
        <span>自定义</span>
        <span
          style="margin-left: 14px;cursor: pointer"
          @click="resetCustomColor"
        >重置</span>
      </div>
      <div class="color-custom">
        <span
          v-for="(color, index) in colorList"
          :key="index"
          class="color-item"
          :class="activeColor === color && 'active'"
          @click="changeActive(color, index)"
          :style="{
            cursor: 'pointer',
            width: '14px',
            height: '16px',
            float: 'left',
            backgroundColor: color
          }"
        ></span>
        <div class="color-picker-style">
          <el-color-picker
            ref="colorPicker"
            v-model="customColor"
            :predefine="predefineColors"
            @change="switchColorCase"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { COLOR_CASES, PREDEFINE_COLORS } from '@/utils/color';

const colorCases = COLOR_CASES;
const predefineColors = PREDEFINE_COLORS;

const emit = defineEmits(['change']);
const currValue = defineModel();
const activeColor = ref('');
const colorScheme = ref({
  name: '',
  label: '',
  colors: []
});
const colorList = ref([]);

const changeColorOption = () => {
  activeColor.value = '';
  const item = colorCases.find(ele => ele.value === colorScheme.value.name);
  colorScheme.value.label = item.name;
  colorList.value = JSON.parse(JSON.stringify(item.colors));
  handleChange();
};

const showCustom = ref(false);

const changeShowCustom = () => {
  showCustom.value = !showCustom.value;
  colorPicker.value?.hide();
};

const customColor = ref();
const colorIndex = ref(0);
const colorPicker = ref();

const switchColorCase = () => {
  colorList.value[colorIndex.value] = customColor.value;
  handleChange();
};

const changeActive = (color, index) => {
  activeColor.value = color;
  colorIndex.value = index;
  customColor.value = color;
  colorPicker.value?.hide();
  setTimeout(() => {
    colorPicker.value.show()
  }, 200);
};

const resetCustomColor = () => {
  changeColorOption();
};

const handleChange = () => {
  colorScheme.value.colors = colorList.value;
  currValue.value = JSON.stringify(colorScheme.value);
  emit('change');
};

watch(() => currValue.value, () => {
  colorScheme.value = currValue.value
    ? JSON.parse(currValue.value)
    : { name: 'default', label: '', colors: [] };
  if (!colorScheme.value.colors || colorScheme.value.colors.length === 0) {
    const item = colorCases.find(ele => ele.value === colorScheme.value.name);
    colorScheme.value.label = item.name;
    colorScheme.value.colors = JSON.parse(JSON.stringify(item.colors));
  }
  colorList.value = colorScheme.value.colors;
  handleChange();
}, {immediate: true});
</script>

<style scoped lang="scss">
.color-scheme {
  width: 100%;
  .color-picker-style {
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  .color-select {
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .custom-title {
    color: white;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 8px;
  }
  .color-custom {
    position: relative;
    .color-item {
      border-radius: 3px;
      width: 14px;
      height: 14px;
      position: relative;
      &::after {
        content: '';
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        border-radius: 3px;
        position: absolute;
        top: -2px;
        border: 1px solid;
        left: -2px;
        display: none;
      }
      &:hover {
        &::after {
          border-color: #3370ff99;
          display: block;
        }
      }
      &.active {
        &::after {
          display: block;
        }
      }
      &.color-item {
        margin-right: 5px;
      }
    }
  }
}
.row-line {
  display: flex;
  flex-direction: row;
  align-items: center;
}
</style>